﻿<div style="width: 100%;">
  <div data-dojo-attach-point="tabParent">
    <div data-dojo-attach-point="symbolPickerContainer" class="symbolPickerContainer">
      <div data-dojo-attach-point="div_symbolOptionsContainer" class="symbolOptionsContainer">
        <div class="label iconOptionsText">
          ${nls.symbolOptionsText}
        </div>
        <hr />
        <div data-dojo-attach-point="div_symbolOptions" class="symbolOptions">
          <!--Symbol Options-->
          <div class="jimu-r-row padTop10"
               data-dojo-attach-point="grpSymbolOptions">
            <div data-dojo-attach-point="div_rdoLayerSym" class="height30">
              <input name="a" data-dojo-type="dijit/form/RadioButton"
                     data-dojo-attach-point="rdoLayerSym"
                     data-dojo-attach-event="onChange:_rdoLayerSymChanged"
                     title="${nls.rdoLayer}" />
              <span class="label">${nls.rdoLayer}</span>
            </div>
          </div>
          <div class="jimu-r-row symPick marginLR20" data-dojo-attach-point="layerSym"> </div>
          <div class="jimu-r-row padTop10" data-dojo-attach-point="grpSymbolOptions">
            <div data-dojo-attach-point="div_rdoEsriSym" class="height30">
              <input name="a" data-dojo-type="dijit/form/RadioButton" data-dojo-attach-point="rdoEsriSym" data-dojo-attach-event="onChange:_rdoEsriSymChanged" title="${nls.rdoEsri}" />
              <span class="label">${nls.rdoEsri}</span>
            </div>
          </div>
          <div data-dojo-attach-point="symbolPicker" data-dojo-type="jimu/dijit/SymbolPicker" class="jimu-r-row symPick marginLR20"></div>
          <div data-dojo-attach-point="parent_div_uploadCustomSymbol">
            <div class="jimu-r-row padTop10" data-dojo-attach-point="grpSymbolOptions">
              <div data-dojo-attach-point="div_rdoCustomSym" class="rdoCustomSym">
                <input name="a" data-dojo-type="dijit/form/RadioButton" data-dojo-attach-point="rdoCustomSym" data-dojo-attach-event="onChange:_rdoCustomSymChanged" title="${nls.rdoCustom}" />
                <span class="label">${nls.rdoCustom}</span>
              </div>
            </div>
            <div data-dojo-attach-point="customSymbolDIV" class="jimu-r-row padTop10 sHeight marginLR20">
              <div data-dojo-attach-point="uploadCustomSymbol" class="uploadCustom"></div>
              <div data-dojo-attach-point="customSymbolPlaceholder" class="customPlaceholder"></div>
            </div>
          </div>

          <!--Clustering Options-->
          <div data-dojo-attach-point="parent_div_clusterOptions" class="clusterOptions">
            <hr class="w" />
            <div class="jimu-r-row padTop10" data-dojo-attach-point="grpClusterOptions">
              <div data-dojo-attach-point="div_chkCluster" class="padTop20">
                <input data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="chkClusterSym" title="${nls.chkCluster}" data-dojo-attach-event="onChange:_chkClusterChanged" />
                <span class="label">${nls.chkCluster}</span>
              </div>
            </div>

            <div data-dojo-attach-point="clusterPickerContainer" class="jimu-r-row marginLR22 grpClusterOptions">
              <div class="jimu-float-leading">${nls.defineClusterSymbol}:</div>
              <div data-dojo-attach-point="clusterPicker" data-dojo-type="jimu/dijit/SymbolPicker" class="jimu-float-trailing colorPick"></div>
            </div>

            <div class="jimu-r-row grpClusterOptions marginLR22" data-dojo-attach-point="grpClusterOptions">
              <input data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="chkClusterCnt" title="${nls.displayClusterCnt}" data-dojo-attach-event="onChange:_chkClusterCntChanged" />
              <span class="label">${nls.displayClusterCnt}</span>
            </div>
            <div class="jimu-r-row grpClusterOptions" data-dojo-attach-point="featureFont" style="display: none; margin-left: 45px; margin-right: 45px;">
              <div class="jimu-float-leading">${nls.defineClusterFont}:</div>
              <div data-dojo-attach-point="colorPicker" data-dojo-type="jimu/dijit/ColorPicker" data-dojo-props='color:"${_highLightColor}"' class="marginLR30 colorPick2 jimu-float-trailing"></div>
            </div>
          </div>
        </div>

        <div class="label iconOptionsText padTop20" data-dojo-attach-point="iconOptionsTextLabel">
          ${nls.iconOptionsText}
        </div>
        <hr />
        <div data-dojo-attach-point="div_iconOptions" class="iconOptions">
          <!--Main Panel and cluster center Icon Options-->
          <div class="jimu-r-row padTop10" data-dojo-attach-point="grpIconOptions">
            <div data-dojo-attach-point="div_rdoLayerIcon">
              <input name="b" data-dojo-type="dijit/form/RadioButton" data-dojo-attach-point="rdoLayerIcon" data-dojo-attach-event="onChange:_rdoLayerIconChanged" title="${nls.rdoLayerIcon}" />
              <span class="label" data-dojo-attach-point="rdoLayerIconLabel">${nls.rdoLayerIcon}</span>
            </div>
          </div>

          <div class="jimu-r-row padTop10" data-dojo-attach-point="grpCustomIconOptions">
            <div class="rdoCustomSym" data-dojo-attach-point="div_rdoCustomIcon">
              <input name="b" data-dojo-type="dijit/form/RadioButton" data-dojo-attach-point="rdoCustomIcon" data-dojo-attach-event="onChange:_rdoCustomIconChanged" title="${nls.rdoCustomIcon}" />
              <span class="label" data-dojo-attach-point="rdoCustomIconLabel">${nls.rdoCustomIcon}</span>
            </div>
          </div>
          <div class="jimu-r-row padTop10 sHeight marginLR30">
            <div data-dojo-attach-point="uploadCustomIcon" class="uploadCustom"></div>
            <div data-dojo-attach-point="customIconPlaceholder" class="customPlaceholder"></div>
          </div>
        </div>
        <input type="file"
               accept="image/png, image/jpeg, image/bmp, image/gif"
               data-dojo-attach-point="fileInput"
               class="fileInput">
      </div>
    </div>
    <div data-dojo-attach-point="panelFeatureDisplayContainer" class="panelFeatureContainer">
      <div class="label iconOptionsText padTop10" data-dojo-attach-point="featureOptionsTextLabel">
        ${nls.featureOptionsText}
      </div>
      <hr />
      <div class="btn-add-section enable" data-dojo-attach-point="btnAddField">
        <span class="btn-add-icon"></span>
        <span class="btn-add-label">${nls.addField}</span>
      </div>
      <div data-dojo-attach-point="fieldOptions" class="fieldOptions"></div>
      <div class="label iconOptionsText padTop20" data-dojo-attach-point="groupOptionsTextLabel">
        ${nls.groupOptionsText}
      </div>
      <hr />
      <div data-dojo-attach-point="groupOptions" class="groupOptions">
        <div data-dojo-attach-point="div_chkGroup">
          <input data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="chkGroup" title="${nls.chkGroup}" data-dojo-attach-event="onChange:_chkGroupChanged" />
          <span class="label" data-dojo-attach-point="chkGroupLabel">${nls.chkGroup}</span>
        </div>
        <div data-dojo-attach-point="groupFieldOptions" class="groupFieldOptions">
        </div>
      </div>
    </div>
  </div>
  <!--Footer-->
  <div class="footer padTop20">
    <div class="jimu-btn ok" data-dojo-attach-point="btnOk"></div>
    <div class="jimu-btn cancel" data-dojo-attach-point="btnCancel"></div>
  </div>
</div>
